<template>
  <el-card class="box-card">
    <div class="text item">
      <el-form
        ref="formData"
        :model="formData"
        :rules="loginRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwd">
          <el-input v-model="formData.pwd"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode">
          <el-row>
            <el-col :span="16">
              <el-input v-model="formData.verifyCode"></el-input>
            </el-col>
            <el-col :span="8">
              <el-image
                style="height: 40px"
                :src="verifyCodeImg"
                @click="randVerifyCode"
              ></el-image>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
        >注 册</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { addonAjaxPost } from "@/utils/ajax";
import { utils } from "@/utils/utils";
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("确定密码不能小于6位"));
      } else {
        callback();
      }
    };
    const validatePwd = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("确定密码不能小于6位"));
      } else if (this.formData.password !== value) {
        callback(new Error("两次输入密码不一样"));
      } else {
        callback();
      }
    };
    return {
      verifyUrl: "/api/login/getVerifyCode",
      indexUrl: "/api/login/register",
      formData: {
        username: "",
        password: "",
        pwd: "",
        verifyCode: "",
      },
      verifyCodeImg: "",
      loginRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
          {
            type: "email",
            required: true,
            message: "请输入正确的邮箱号",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        pwd: [{ required: true, trigger: "blur", validator: validatePwd }],
        verifyCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["blur", "change"],
          },
        ],
      },
      loading: false,
    };
  },
  mounted() {
    this.randVerifyCode();
  },
  methods: {
    async randVerifyCode() {
      var that = this;
      addonAjaxPost(this.verifyUrl, {}, function (result) {
        console.log(result);
        that.verifyCodeImg = result.data.verifyCodeImg;
      });
    },
    handleLogin() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          var that = this;
          addonAjaxPost(this.indexUrl, this.formData, function (result) {
            if (result.code == 200) {
              that.$message({
                message: result.msg,
                type: "success",
                duration: 5 * 1000,
              });
              utils.cacheSet("addonappstr", result.data.appstr);
              that.$emit("click", {});
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>